<template>
  <div class="login-container">
    <sk-header :header-conf="headerConfig" @loginFormShowHandleEmit="loginFormShowHandle" />
    <el-dialog title="" :modal="false" :visible.sync="dialogFormVisible" width="400" height="400">
      <el-form v-show="loginFormShow" v-model="loginFormShowHandle" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px"
          class="card-box login-form">
          <h3 class="title">登 录</h3>
          <el-form-item prop="username" :class="{'active': isActive}">
            <!-- <span class="svg-container svg-container_login">
              <svg-icon icon-class="user" />
            </span> -->
            <span class="ico-user"></span>
            <el-input @focus="focusClassHandle" @blur="blurClassHandle" class="un" name="username" clearable type="text" v-model="loginForm.username" autoComplete="off" placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item prop="password" :class="{'active': isActive}">
            <!-- <span class="svg-container">
              <svg-icon icon-class="password"></svg-icon>
            </span> -->
            <span class="ico-pwd"></span>
            <el-input @focus="focusClassHandle" @blur="blurClassHandle" class="pwd" name="password" clearable :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="new-password"
              placeholder="请输入账户密码"></el-input>
              <!-- <span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" /></span> -->
          </el-form-item>
          <el-form-item prop="imageCode" :class="{'active': isActive}">
            <!-- <span class="svg-container">
              <svg-icon icon-class="password"></svg-icon>
            </span> -->
            <span class="ico-img-code"></span>
            <el-input @focus="focusClassHandle" @blur="blurClassHandle" class="captcha" name="imageCode" type="tel" v-model="loginForm.imageCode" autoComplete="on"
              placeholder="请输入验证码"></el-input>
              <span class="show-pwd" @click="getImgCap">
                <!-- <svg-icon icon-class="eye" /> -->
                <img :src="imageCap" />
              </span>
          </el-form-item>
          <el-form-item>
            <div class="err-tip"></div>
            <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
              立即登录
            </el-button>
          </el-form-item>
      <!-- <div class="tips">
        <span style="margin-right:20px;">username: admin</span>
        <span> password: admin</span>
      </div> -->
      <!-- <a class="link-type" href="javascript:;">忘记密码</a> -->
      </el-form>
    </el-dialog>

    <!-- <div class="slider-div"> -->
        <!-- 配置slider组件 
        <i v-show="isArrowUp" class="el-icon-arrow-up" @click="slidePreFunc"></i>
        -->
            <!-- 设置loading,可自定义 -->
        <!-- 
        <slider ref="slider" :pages="pages" :sliderinit="sliderinit" @slide='slide' @tap='onTap' @init='onInit'>
            <div slot="loading">loading...</div>
        </slider> 
        <i v-show="isArrowDown" class="el-icon-arrow-down" @click="slideNext"></i>
        -->
    <!-- </div> -->

    <!-- <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
      class="login-form"
      autocomplete="on"
      label-position="left"
    >
      <div class="title-container">
        <h3 class="title">
          {{ $t('login.title') }}
        </h3>
        <lang-select class="set-language" />
      </div>

      <el-form-item prop="username">
        <span class="svg-container">
          <svg-icon name="user" />
        </span>
        <el-input
          ref="username"
          v-model="loginForm.username"
          :placeholder="$t('login.username')"
          name="username"
          type="text"
          autocomplete="on"
        />
      </el-form-item>

      <el-form-item prop="password">
        <span class="svg-container">
          <svg-icon name="password" />
        </span>
        <el-input
          :key="passwordType"
          ref="password"
          v-model="loginForm.password"
          :type="passwordType"
          :placeholder="$t('login.password')"
          name="password"
          autocomplete="on"
          @keyup.enter.native="handleLogin"
        />
        <span
          class="show-pwd"
          @click="showPwd"
        >
          <svg-icon :name="passwordType === 'password' ? 'eye-off' : 'eye-on'" />
        </span>
      </el-form-item>

      <el-button
        :loading="loading"
        type="primary"
        style="width:100%; margin-bottom:30px;"
        @click.native.prevent="handleLogin"
      >
        {{ $t('login.logIn') }}
      </el-button>

      <div style="position:relative">
        <div class="tips">
          <span>{{ $t('login.username') }} : admin </span>
          <span>{{ $t('login.password') }} : {{ $t('login.any') }} </span>
        </div>
        <div class="tips">
          <span>{{ $t('login.username') }} : editor </span>
          <span>{{ $t('login.password') }} : {{ $t('login.any') }} </span>
        </div>

        <el-button
          class="thirdparty-button"
          type="primary"
          @click="showDialog=true"
        >
          {{ $t('login.thirdparty') }}
        </el-button>
      </div>
    </el-form> -->

    <el-dialog :title="$t('login.thirdparty')" :visible.sync="showDialog">
      {{ $t('login.thirdpartyTips') }}
      <br>
      <br>
      <br>
      <social-sign />
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import { Route } from 'vue-router'
import { Dictionary } from 'vuex'
import { Form as ElForm, Input } from 'element-ui'
import { UserModule } from '@/store/modules/user'
import { isValidUsername } from '@/utils/validate'
import LangSelect from '@/components/LangSelect/index.vue'
import SocialSign from './components/SocialSignin.vue'
import SkHeader from '@/views/layout/components/SkHeader.vue'
import { route_origins } from '@/api/routes'
// import slider from 'vue-concise-slider'

@Component({
  name: 'Login',
  components: {
    SkHeader,
    // slider,
    LangSelect,
    SocialSign
  }
})
export default class extends Vue {
   private passwordType = 'password'
   private loading = false
   private showDialog = false
   private redirect?: string
   private otherQuery: Dictionary<string> = {}
   private s2count = ''
   private loginFormShow = true
   private dialogFormVisible = false
   private headerConfig = {
      isDropDownMenu: false,
      isTopRightOfficial: true,
      isLogin: true,
      isLogout: false
   }
   private loginForm = {
       username: '',
       password: '',
       imageCode: ''
   }
   private pwdType = 'password'
   private imageCap = ''
   private isArrowUp = false
   private isArrowDown = true
   private isActive = false
   private pages = []

   private validateUsername = (rule: any, value: string, callback: Function) => {
      if (!isValidUsername(value)) {
          callback(new Error('请输入正确的用户名'))
      } else if (value.trim() === '') {
          callback(new Error('用户名不能为空'))
      } else {
          callback()
      }
   }
   private validatePass = (rule: any, value: string, callback: Function) => {
      if (value.length < 6) {
          callback(new Error('密码不能小于6位'))
      } else {
          callback()
      }
   }
   private validateImageCode = (rule: any, value: any, callback: Function) => {
      if (isNaN(value)) {
          callback(new Error('验证码必须为数字'))
      } else if (value.length < 4) {
          callback(new Error('验证码不能小于4位'))
      } else {
          callback()
      }
   }
   private loginRules = {
       username: [{
           required: true,
           trigger: 'blur',
           validator: this.validateUsername
       }],
       password: [{
           required: true,
           trigger: 'blur',
           validator: this.validatePass
       }],
       imageCode: [{
           required: true,
           trigger: 'blur',
           validator: this.validateImageCode
       }]
   }
   private sliderinit = {
       currentPage: 0,
       thresholdDistance: 500,
       thresholdTime: 100,
       autoplay: 0,
       loop: true,
       direction: 'vertical',
       infinite: 1,
       slidesToScroll: 1,
       timingFunction: 'ease',
       // freeze: true,
       // pagination: false,
       duration: 1000
       // effect: 'slider'
   }
   private sprev = true
   private snext = true
   private isReturn = false

   private focusClassHandle(e: any) {
      // this.isActive = true
      // e.path[3]['style'].borderColor = '#9A9EA3'
      // e.path[2].childNodes[0]['style'].color = '#9A9EA3'
      // const ev = <MouseEvent>e
      e.target.parentNode.parentNode.parentNode.className = 'el-form-item is-required active'
      // if (this.isReturn) return
      addEventListener('keydown', (e: any) => {
          this.isReturn = true
          if (e.keyCode === 13) {
              this.handleLogin()
          }
      })
   }
   private blurClassHandle(e: any) {
      e.target.parentNode.parentNode.parentNode.className = 'el-form-item is-required'
      // this.isActive = false
      // const ev = <MouseEvent>e
   }
   private getImgCap() {
      console.log(arguments)
      this.imageCap = route_origins + 'jcaptcha?' + Date.now()
   }
   private loginFormShowHandle() {
      // this.loginFormShow = !this.loginFormShow
      console.log('loginFormShowHandleEmit_Parent')
      this.dialogFormVisible = !this.dialogFormVisible
   }

   private onRouteChange(route: Route) {
      // TODO: remove the "as Dictionary<string>" hack after v4 release for vue-router
      // See https://github.com/vuejs/vue-router/pull/2050 for details
      const query = route.query as Dictionary<string>
      if (query) {
         this.redirect = query.redirect
         this.otherQuery = this.getOtherQuery(query)
      }
   }
   
   // @Watch('$route', { immediate: true })
   // private route = <Route>this.$route
   // @Watch(route, { immediate: true })

   created() {
      /*
      overdueLogin({}).then(response => {
         console.log('overdueLogin:', response)
      }).catch(err => {
         this.$message({
             message: err && err.resultMsg || '获取overdueLogin失败！',
             type: 'error'
         })
      })
      console.log(routers)
      this.imageCap = route_origins + 'jcaptcha?' + Date.now()
      imgCaptcha({}).then(response => {
         console.log('imgCaptcha:', response)
      }).catch(err => {
         this.$message({
             message: err && err.resultMsg || '获取验证码失败！',
             type: 'error'
         })
      })
      */
      this.getImgCap()
   }
  
   mounted() {
      // if (this.loginForm.username === '') {
      //    (this.$refs.username as Input).focus()
      // } else if (this.loginForm.password === '') {
      //    (this.$refs.password as Input).focus()
      // }
   }
/*
  private showPwd() {
    if (this.passwordType === 'password') {
      this.passwordType = ''
    } else {
      this.passwordType = 'password'
    }
    this.$nextTick(() => {
      (this.$refs.password as Input).focus()
    })
  }
*/
  private handleLogin() {
    (this.$refs.loginForm as ElForm).validate(async(valid: boolean) => {
      if (valid) {
        this.loading = true
        await UserModule.Login(this.loginForm)
        this.$router.push({
            path: '/'
        })
        console.log('handleLogin:await')
        // this.$router.push({
        //   path: this.redirect || '/',
        //   query: this.otherQuery
        // })
        // Just to simulate the time of the request
        setTimeout(() => {
          this.loading = false
        }, 0.5 * 1000)
      } else {
        return false
      }
    })
  }

  private handleLogin1() {
    (this.$refs.loginForm as ElForm).validate((valid: boolean) => {
        if (valid) {
            this.loading = true
            this.$store.dispatch('Login', this.loginForm).then(() => {
                this.$router.push({
                    path: '/'
                })
                setTimeout(t => {
                    this.loading = false
                }, 1000)
            }).catch(() => {
                this.loading = false
            })
        } else {
            console.log('error submit!!')
            return false
        }
    })
  }


  private getOtherQuery(query: Dictionary<string>) {
    return Object.keys(query).reduce((acc: any, cur: any) => {
      if (cur !== 'redirect') {
        acc[cur] = query[cur]
      }
      return acc
    }, {} as Dictionary<string>)
  }

  private slidePreFunc() {
    console.log(arguments)
    // this.$refs.slider.$emit('slidePre')
  }
  private slideNext() {
    console.log(arguments)
    // this.$refs.slider.$emit('slideNext')
  }
  private slide(data: any) {
    console.log('slide:', data)
    // const m = (s: any) => {
    //   return <HTMLElement>document.querySelector(s)
    // }
    // <HTMLElement>m('.l').style.animation = <HTMLElement>m('.r').style.animation = 'none'
    // <HTMLElement>m('.business').style.animation = <HTMLElement>m('.security').style.animation = 'none'
    // setTimeout(() => {
    //     this.sprev = this.snext = true
    // }, 1500)
    // // const sh3 = m('.shinning').style.backgroundImage
    // // m('.shinning').style.backgroundImage = 'none'
    // this.sliderinit.currentPage = data.currentPage
    // switch (data.currentPage) {
    //     case 0:
    //         {
    //             this.isArrowUp = false
    //             this.isArrowDown = true
    //             break
    //         }
    //     case 1:
    //         {
    //             this.isArrowUp = true
    //             this.isArrowDown = true
    //             break
    //         }
    //     case 2:
    //         {
    //             console.log('this.s2count:', this.s2count)
    //             if (this.s2count) return
    //             let inter = 0
    //             this.s2count = setInterval(() => {
    //                 inter++
    //                 if (inter % 5 === 0) {
    //                     clearInterval(this.s2count)
    //                     this.s2count = ''
    //                 }
    //                 m(`.finger${inter}`).className = `finger${inter} enter`
    //                 setTimeout(() => {
    //                     m(`.finger${inter}`).className = `finger${inter}`
    //                 }, 750)
    //             }, 1500)
    //             this.isArrowUp = true
    //             this.isArrowDown = true
    //             break
    //         }
    //     case 3:
    //         {
    //             this.isArrowUp = true
    //             this.isArrowDown = true
    //             <HTMLElement>m('.l').style.animation = 's4opa 1s linear 1'
    //             <HTMLElement>m('.r').style.animation = 's4opa 1.5s linear 1'
    //             // m('.shinning').style.backgroundImage = sh3
    //             break
    //         }
    //     case 4:
    //     case -1:
    //         {
    //             this.isArrowUp = true
    //             this.isArrowDown = false
    //             <HTMLElement>m('.business').style.animation = 's4opa 1s linear 1'
    //             <HTMLElement>m('.security').style.animation = 's4opa 1.5s linear 1'
    //             break
    //         }
    // }
    // this.pages[0].style.visibility = data.currentPage !== 0 ? 'hidden' : 'visible'
  }
  private onTap(data: any) {
    console.log('onTap:', data)
  }
  private onInit(data: any) {
    console.log('onInit:', data)
    // this.mouseWheelFunc()
    // this.screen2Hover()
    // setTimeout(() => {
    //     <HTMLElement>document.querySelector('.starfield2').style.opacity = 1
    // }, 5000)
  }
  private mouseWheelFunc() {
      // <HTMLElement>document.addEventListener('DOMMouseScroll', (e: any) => {
      //     console.log('DOMMouseScroll:', e)
      //     if ((this.sliderinit.currentPage === 0 && e.detail < 0) ||
      //         (this.sliderinit.currentPage === 4 && e.detail > 0)) return
      //     if (this.$route.fullPath !== '/login') return
      //     // console.log(this.snext, this.sprev)
      //     if (e.detail > 0 && this.snext) {
      //         this.$refs.slider.$emit('slideNext')
      //         this.snext = false
      //     }
      //     if (e.detail < 0 && this.sprev) {
      //         this.$refs.slider.$emit('slidePre')
      //         this.sprev = false
      //     }
      // }, false)
      // <HTMLElement>document.body.onmousewheel = (e: any) => {
      //     console.log('sliderinit:', this.sliderinit.currentPage)
      //     if ((this.sliderinit.currentPage === 0 && e.wheelDelta > 0) ||
      //         (this.sliderinit.currentPage === 4 && e.wheelDelta <= 0)) return
      //     if (this.$route.fullPath !== '/login') return
      //     // console.log(this.snext, this.sprev)
      //     if (e.wheelDelta <= 0 && this.snext) {
      //         this.$refs.slider.$emit('slideNext')
      //         this.snext = false
      //     }
      //     if (e.wheelDelta > 0 && this.sprev) {
      //         this.$refs.slider.$emit('slidePre')
      //         this.sprev = false
      //     }
      // }
  }
  private screen2Hover() {
      // const hoverFunc = (str: string, callback1: Function, callback2: Function) => {
      //     str.split(',').forEach((m: any, i: number) => {
      //         const mm = <HTMLElement>document.querySelector(m) || <HTMLElement>document.body
      //         mm.onmouseover = (e: any) => {
      //             callback1 && callback1(e)
      //         }
      //         mm.onmouseout = (e: any) => {
      //             callback2 && callback2(e)
      //         }
      //     })
      // }
      // hoverFunc('.circle1,.circle2,.circle3,.circle4,.circle5,.circle6,.circle7,.circle8,.circle9', (e: any) => {
      //     // console.log(e.target, e.currentTarget)
      //     <HTMLElement>document.querySelector('.torchs').className = `torchs t${<HTMLElement>e.currentTarget.className.replace(/[^\d]/img, '')}`
      // }, (e: any) => {
      //     <HTMLElement>document.querySelector('.torchs').className = `torchs`
      // })
  }
}
</script>

<style lang="scss">
$bg:#2d3a4b;
// $dark_gray:#889aa4;
$dark_gray:#9A9EA3;
$light_gray:#A4A7AA;

@keyframes s1backposy
{
    // from { background-position-y: -250px; }
    // to { background-position-y: -550px; }
    0%   {background-position-y: -20px;}
    // 25%  {background-position-y: -300px;}
    50%  {background-position-y: -180px;}
    // 75%  {background-position-y: -300px;}
    100% {background-position-y: -20px;}
}

@keyframes s4opa {
    0%   { opacity: 0; }
    80%   { opacity: 0; }
    100%   { opacity: 1; }
}

.login-container {
    position: fixed;
    height: 100%;
    width:100%;
    // background-color: $bg; #0052a5
    background:linear-gradient(#01011B, $bg);
    input:-webkit-autofill {
      -webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;
      -webkit-text-fill-color: #fff !important;
    }
    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      // height: 47px;
      &:focus{
        border-color: #3BABF5;
        color: #3BABF5;
      }
    }
    .el-dialog__wrapper{
        // background: rgba(0,0,0,.2);
        background: rgba(0,0,0,.5);
        .el-dialog{
            // background: rgba(0, 0, 0, .35);
            background: linear-gradient(rgba(7, 35, 45, 0.65), rgba(7, 35, 45, 0.45));
            width: 400px;
            height: 400px;
            border-radius: 8px;
            // box-shadow: 0 0 1px 0px rgba(255,255,255,.5);
            box-shadow: 0 0 1px 1px rgba(255, 255, 255, .3);
            .el-dialog__body {
                padding: 14px 20px 30px 20px;
            }
        }
    }
    .el-input {
      display: inline-block;
      height: 45px;
      width: 90%;
      .el-input__suffix{
        right: 15px;
      }
      .el-input__inner{
        width: 96%;
      }
    }
    .tips {
      font-size: 14px;
      color: #fff;
      margin-bottom: 10px;
    }
    .svg-container {
      padding: 6px 5px 6px 15px;
      color: $dark_gray;
      vertical-align: middle;
      width: 30px;
      display: inline-block;
      &_login {
        font-size: 20px;
      }
    }
    .ico-user, .ico-pwd, .ico-img-code{
        margin: 5px 5px 6px 15px;
        vertical-align: middle;
        width: 24px;
        height: 25px;
        display: inline-block;
        background-size: auto 100%;
        background-repeat: no-repeat;
    }
    .ico-user{
        background-image: url(../../assets/logins/p1_ico_user.png);
    }
    .ico-pwd{
        background-image: url(../../assets/logins/p1_ico_pwd.png);
    }
    .ico-img-code{
        background-image: url(../../assets/logins/p1_ico_img_code.png);
    }
    .title {
      font-size: 30px;
      font-weight: normal;
      color: #fff;
      margin: 0px auto 28px auto;
      text-align: center;
    }
    .login-form {
      /* position: absolute;
      left: 0;
      right: 0;
      width: 400px;
      padding: 35px 35px 15px 35px;
      margin: 120px auto; */
    }
    .el-form-item {
      // border: 1px solid rgba(255, 255, 255, 0.1);
      // border-radius: 5px;
      border: 1px solid #9A9EA3;
      &.active{
        border-color: #3BABF5;
        input{
            border-color: #3BABF5;
        }
        input::placeholder{
            color: #3BABF5;
        }
        .ico-user{
            background-image: url(../../assets/logins/p1_ico_user_blue.png);
        }
        .ico-pwd{
            background-image: url(../../assets/logins/p1_ico_pwd_blue.png);
        }
        .ico-img-code{
            background-image: url(../../assets/logins/p1_ico_img_code_blue.png);
        }
      }
      // background: rgba(0, 0, 0, 0.1);
      color: #A4A7AA;
      width: 360px;
      height: 45px;
      line-height: 45px;
      margin-bottom: 20px;
      .el-form-item__content{
        line-height: 45px;
        margin-top: -2px;
        height: inherit;
        white-space: nowrap;
        /* &:nth-child(2){
            &:after{
                content: '';
            }
        } */
      }
      &:nth-child(5){
        border: none;
        margin-top: 40px;
      }
    }
    .show-pwd {
      position: absolute;
      right: 10px;
      top: 7px;
      font-size: 16px;
      color: $dark_gray;
      cursor: pointer;
      user-select:none;
      img{
        width: 100px;
        height: 43px;
        margin: -5px -10px 0 0;
      }
    }
    .svg-container{
        padding-top: 0px;
    }
    .thirdparty-button{
      position: absolute;
      right: 35px;
      bottom: 28px;
    }
    .el-button--primary{
        font-family: 'PingFangSC-Medium';
        // border: none;
        border-radius: unset;
        font-size: 20px;
        color: #FFFFFF;
        letter-spacing: 1.05px;
    }

    //custom
    .link-type{
      clear: inherit;
      float: right;
      color: #09c;
    }
    .slider-div{
        z-index: -1;
        width:100%;
        // margin:20px auto;
        min-height:400px;
        position: absolute;
        // top: 60px;
        top: 0px;
        bottom: 0;
        .el-icon-arrow-up, .el-icon-arrow-down{
            position: absolute;
            left: 50%;
            color: white;
            font-size: 40px;
            z-index: 9;
            cursor: pointer;
            opacity: .4;
            transition: ease 500ms opacity;
            &:hover{
                opacity: 1;
            }
        }
        .el-icon-arrow-up{
            // display: none;
            top: 50px;
        }
        .el-icon-arrow-down{
            bottom: 0px;
        }
        .slider-item{}
        .slider1, .slider2, .slider3, .slider4, .slider5{
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            position: absolute;
            background-size: 1780px 100%;
            background-repeat: no-repeat;
            background-position: center;
        }
        .slider1{
            overflow: hidden;
            background-image: url(../../assets/logins/p1_sky.jpg);
            background-size: cover;
            @keyframes mountain-shake{
                0% { transform: scale(1); }
                50% { transform: scale(1.5); }
                100% { transform: scale(1); }
            }
            .mountain-high{
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 314px;
                z-index: 9999;
                background-size: 100% 100%;
                // animation: mountain-shake 25s infinite linear;
                // background-repeat: repeat-x;
                background-position: 0px 0;
                background-image: url(../../assets/logins/p1_mountain.png);
            }
            &:after{
            }
            transition: background ease 2.5s;
            // animation:s1backposy 10s infinite;
            // star-field
            @keyframes starfieldRotate {
              from {
                transform: rotate(0deg);
              }
              to {
                transform: rotate(360deg);
              }
            }
            .starfield {
              position: absolute;
              left: -500px;
              bottom: -500px;
              top: -1050px;
              right: -1220px;
              span {
              }
            }
            .starfield2{ 
                transition: opacity 3000ms ease;
                opacity: 0;
            }
            .starfield > * {
              position: absolute;
              top: 0;
              left: 0;
              height: 100%;
              width: 100%;

              background-size: 200px 200px;
              background-image: radial-gradient(
                  3px 3px at 40px 60px,
                  #ccc,
                  rgba(0, 0, 0, 0)
                ),
                radial-gradient(2px 2px at 20px 50px, #ddd, rgba(0, 0, 0, 0)),
                radial-gradient(2px 2px at 10px 40px, #ddd, rgba(0, 0, 0, 0)),
                radial-gradient(2px 2px at 30px 100px, #eee, rgba(0, 0, 0, 0)),
                radial-gradient(2px 2px at 40px 60px, #fff, rgba(0, 0, 0, 0)),
                radial-gradient(2px 2px at 110px 90px, #ccc, rgba(0, 0, 0, 0)),
                radial-gradient(2px 2px at 140px 100px, #ccc, rgba(0, 0, 0, 0)),
                radial-gradient(2px 2px at 190px 150px, #ddd, rgba(0, 0, 0, 0)),
                radial-gradient(2px 2px at 90px 123px, #ddd, rgba(0, 0, 0, 0)),
                radial-gradient(2px 2px at 205px 80px, #ddd, rgba(0, 0, 0, 0)),
                radial-gradient(2px 2px at 25px 200px, #ddd, rgba(0, 0, 0, 0));
              background-repeat: repeat;
              transform-origin: 50% 50%;
              animation-iteration-count: infinite;
              animation-timing-function: linear;
              animation-name: starfieldRotate;
            }
            .starfield > *:nth-child(1) {
              animation-duration: 120s;
            }
            .starfield > *:nth-child(2) {
              animation-duration: 200s;
            }
            /* 
            .starfield > *:nth-child(3) {
              animation-duration: 120s;
            }
            .starfield > *:nth-child(4) {
              animation-duration: 168s;
            }
            .starfield > *:nth-child(5) {
              animation-duration: 192s;
            }
            .starfield > *:nth-child(6) {
              animation-duration: 232s;
            }
            .starfield > *:nth-child(7) {
              animation-duration: 256s;
            }
            .starfield > *:nth-child(8) {
              animation-duration: 288s;
            } */
        }
        .slider2{
            text-align: center;
            background-image: url(../../assets/logins/p2_night.jpg);
            background-position: center bottom;
            // background-size: cover;
            // background-size: 1620px 100%;
            // background-size: 100% 100%;
            overflow: hidden;
            @keyframes rotater {
                0%   { transform:scale(1) translate(-50%,-50%) rotate(0); }
                100% { transform:scale(1) translate(-50%,-50%) rotate(360deg); }
                0%   { transform:scale(1) translate(-50%,-50%) rotate(0); }
            }
            .con{
                width: 1366px;
                max-width: 1366px;
                position: relative;
                display: inline-block;
                text-align: center;
                height: 100%;
                min-height:750px;
                top:58%;
                transform:translate(0%, -50%);
                // bottom:5%;
                // min-height: 750px;
                // box-shadow: inset 0 0 1px 1px white;
                // border: 2px solid white;
                // max-height: 750px;
                .circle1,.circle2,.circle3,.circle4,.circle5,.circle6,.circle7,.circle8,.circle9{
                    div{
                        font-size: 14px;
                        font-weight: bolder;
                        cursor: pointer;
                        border-radius: 50%;
                        width: 88px;
                        height: 88px;
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform:translate(-50%, -50%);
                        width: 126px;
                        height: 126px;
                    }
                    z-index: 99;
                    position: absolute;
                    transition: all 500ms ease;
                    &:hover{
                        &:before{
                            content: '';
                            width: 198px;
                            height: 10px;
                            top: 93px;
                            left: -100px;
                            position: absolute;
                            background-image:url(../../assets/logins/p2_cont_border.png);
                            background-size: 100% auto;
                            z-index: 999;
                        }
                        &:after{
                            content: '';
                            position: absolute;
                            width: 180px;
                            padding: 12px 8px;
                            background: rgba(0, 0, 0, 0.3);
                            border: 1px solid rgba(170, 89, 46, 0.8);
                            border-bottom-left-radius: 3px;
                            border-bottom-right-radius: 3px;
                            border-top: none;
                            font-family: 'PingFangSC-Regular';
                            text-align: left;
                            font-size: 10px;
                            white-space: normal;
                            color: #FFFFFF;
                            letter-spacing: 0.67px;
                            top: 103px;
                            left: -100px;
                        }
                        transform: scale(1.2);
                        .c1{
                            border:2px dotted rgba(237,102,13,.45);
                            &:before{
                                display: block;
                                background-image:url(../../assets/logins/p2_ball_hover.png);
                                background-size: 100% auto;
                                width: 153%;
                                height: 156%;
                                left: 50%;
                                top: 50%;
                                transform: translate(-50%, -50%);
                            }
                        }
                        .c2{
                            border-left-color: rgba(237,102,13,1);
                            // border: 1px solid rgba(237,102,13,.7);
                        } 
                        .c3{
                            border-color: rgba(237,102,13,1);
                            border-top-color: #600;
                        }
                        .c4{
                            background: rgba(73,28,3,.4);
                            border-color: rgba(237,102,13,1);
                        }
                        .c5{
                            border-color: rgba(237,102,13,1);
                            border-right: 2px solid transparent;
                        }
                        .c6{
                            // color: rgba(237,102,13,1);
                            color: white;
                        }
                    }
                    .c1{
                        border:2px dotted rgba(255,255,255,.35);
                        animation:rotater 10s linear infinite;
                        &:before{
                            display: none;
                            content: '';
                            background-image:url(../../assets/logins/p2_ball.png);
                            background-size: auto 100%;
                            background-repeat: no-repeat;
                            position: absolute;
                            width: 130%;
                            height: 130%;
                            left: 65%;
                            top: 48%;
                            transform: translate(-50%, -50%);
                        }
                    }
                    .c2{
                        width: 108px;
                        height: 108px;
                        border: 5px solid transparent;
                        border-left-color:rgba(255,255,255,.8);
                        animation:rotater 10s linear infinite reverse;
                    }
                    .c3{
                        width: 98px;
                        height: 98px;
                        border: 1px solid rgba(255,255,255,.7);
                        // border-top-color: #09c;
                        animation:rotater 10s linear infinite;
                    }
                    .c4{
                        border: none;
                        background: rgba(0,0,0,.4);
                        width: 80px;
                        height: 80px;
                        animation:rotater 10s linear infinite reverse;
                    }
                    .c5{
                        width: 68px;
                        height: 68px;
                        border: 2px solid rgba(255,255,255,.8);
                        border-right: 2px solid transparent;
                        font-weight: bolder;
                        color: #B6D6FF;
                        line-height: 68px;
                        animation:rotater 10s linear infinite;
                    }
                    .c6{
                        line-height: 126px;
                        color: #B6D6FF;
                        span{
                            display: inline-block;
                            width: 69px;
                            white-space: normal;
                            line-height: normal;
                            margin-top: 46px;
                        }
                    }
                }
                .circle1{
                    top:300px;
                    left: 75px;
                    &:hover{
                        &:after{
                            content: '量化反应还款可能性 助力催收资源合理分配。'
                        }
                    }
                }
                .circle2{
                    top:120px;
                    left: 260px;
                    &:hover{
                        &:after{
                            content: '多模板自动映射匹配 一键实现上游数据导入。'
                        }
                    }
                }
                .circle3{
                    top:230px;
                    left: 462px;
                    &:hover{
                        &:after{
                            content: '多种智能分单模式选择 有效提升案件分配效率。'
                        }
                    }
                }
                .circle4{
                    top:370px;
                    left: 704px;
                    &:hover{
                        &:after{
                            content: '实时监控路线轨迹 外访情况尽在掌握。'
                        }
                    }
                }
                .circle5{
                    top:460px;
                    left: 920px;
                    &:hover{
                        &:after{
                            content: '多种实用性极强功能 辅助提高催收效率。'
                        }
                    }
                }
                .circle6{
                    top:280px;
                    left: 1112px;
                    &:hover{
                        &:after{
                            content: '云服务轻量产品配置快 提供灵活稳定解决方案。'
                        }
                    }
                }
                .circle7{
                    top:135px;
                    left: 1292px;
                    &:hover{
                        &:after{
                            content: '多维度精细统计报表管理 提高催收管理效率。'
                        }
                    }
                }
                .circle8{
                    top:115px;
                    left: 650px;
                    &:hover{
                        &:after{
                            content: '自动识别号码可联情况 提高有效联络比例。'
                        }
                    }
                }
                .circle9{
                    top:137px;
                    left: 916px;
                    &:hover{
                        &:after{
                            content: '多维度精细统计报表管理 提高催收管理效率。'
                        }
                    }
                }
                @keyframes shoudian2 {
                    0%   { transform:rotate(-60deg); }
                    25% { transform:rotate(-6deg); }
                    50% { transform:rotate(49deg); }
                    75%   { transform:rotate(-6deg); }
                    100%   { transform:rotate(-60deg); }
                }
                .torchs{
                    // width: 50px;
                    // height: 700px;
                    // transform: translateX(-70%);
                    // padding: 406px 30px;
                    // background-image: url(../../assets/logins/p2_torch.png);
                    // background-image: url(../../assets/logins/p2_beam.png);
                    // background-size: 100% 100%;
                    // transform: rotate(0deg);
                    // display: none;
                    bottom: 100px;
                    left: 830px;
                    position: absolute;
                    transform-origin: bottom center;
                    background: transparent;
                    // animation:shoudian2 15s ease-in-out infinite;
                    // opacity: 0;
                    z-index: 1;
                    perspective:2px;
                    padding: 0;
                    transform: rotate(-60deg);
                    // transition:250ms ease all;
                    // overflow: hidden;
                    // position: relative;
                    .lights{
                        // background: linear-gradient(transparent, rgba(255, 255, 255, 0.2));
                        background: transparent;
                        // background: linear-gradient(transparent, rgba(255, 255, 255, .4));
                        width: 15px;
                        height: 167px;
                        margin: -150px 0 0 0;
                        transform: rotateX(-2deg);
                    }
                    &.t1{
                        animation: none;
                        // animation-play-state: paused;
                        perspective:3.8px;
                        transform: rotate(-64deg);
                        .lights{
                            // background: rgba(255, 255, 255, .1);
                            background: linear-gradient(transparent, rgba(255, 255, 255, .3)), rgba(255, 255, 255, .05);
                            box-shadow: 0 0 2px 2px rgba(255, 255, 255, .05);
                        }
                    }
                    &.t2{
                        animation: none;
                        // animation-play-state: paused;
                        perspective:3.7px;
                        transform: rotate(-47deg);
                        .lights{
                            // background: linear-gradient(transparent, rgba(255, 255, 255, 0.85));
                            background: linear-gradient(transparent, rgba(255, 255, 255, .3)), rgba(255, 255, 255, .05);
                            box-shadow: 0 0 2px 2px rgba(255, 255, 255, .05);
                        }
                    }
                    &.t3{
                        animation: none;
                        // animation-play-state: paused;
                        perspective:4.1px;
                        transform: rotate(-41deg);
                        .lights{
                            // background: linear-gradient(transparent, rgba(255, 255, 255, 0.75));
                            background: linear-gradient(transparent, rgba(255, 255, 255, .3)), rgba(255, 255, 255, .05);
                            box-shadow: 0 0 2px 2px rgba(255, 255, 255, .05);
                        }
                    }
                    &.t4{
                        animation: none;
                        // animation-play-state: paused;
                        perspective:5.6px;
                        transform: rotate(-26deg);
                        .lights{
                            // background: linear-gradient(transparent, rgba(255, 255, 255, 0.65));
                            background: linear-gradient(transparent, rgba(255, 255, 255, .3)), rgba(255, 255, 255, .05);
                            box-shadow: 0 0 2px 2px rgba(255, 255, 255, .05);
                        }
                    }
                    &.t5{
                        animation: none;
                        // animation-play-state: paused;
                        perspective:8px;
                        transform: rotate(22deg);
                        .lights{
                            background: linear-gradient(transparent, rgba(255, 255, 255, .3)), rgba(255, 255, 255, .05);
                            box-shadow: 0 0 2px 2px rgba(255, 255, 255, .05);
                        }
                    }
                    &.t6{
                        animation: none;
                        // animation-play-state: paused;
                        perspective:4.2px;
                        transform: rotate(36deg);
                        .lights{
                            background: linear-gradient(transparent, rgba(255, 255, 255, .3)), rgba(255, 255, 255, .05);
                            box-shadow: 0 0 2px 2px rgba(255, 255, 255, .05);
                        }
                    }
                    &.t7{
                        animation: none;
                        // animation-play-state: paused;
                        perspective:3.8px;
                        transform: rotate(42deg);
                        .lights{
                            background: linear-gradient(transparent, rgba(255, 255, 255, .3)), rgba(255, 255, 255, .05);
                            box-shadow: 0 0 2px 2px rgba(255, 255, 255, .05);
                        }
                    }
                    &.t8{
                        animation: none;
                        perspective:3.8px;
                        transform: rotate(-19deg);
                        .lights{
                            background: linear-gradient(transparent, rgba(255, 255, 255, .3)), rgba(255, 255, 255, .05);
                            box-shadow: 0 0 2px 2px rgba(255, 255, 255, .05);
                        }
                    }
                    &.t9{
                        animation: none;
                        perspective:4.2px;
                        transform: rotate(9deg);
                        .lights{
                            background: linear-gradient(transparent, rgba(255, 255, 255, .3)), rgba(255, 255, 255, .05);
                            box-shadow: 0 0 2px 2px rgba(255, 255, 255, .05);
                        }
                    }
                }
                .torch{
                    display:none;
                    position: absolute;
                    width: 500px;
                    height: 500px;
                    bottom: 28px;
                    left: 50%;
                    // transform: translateX(-70%);
                    background-size: 100% 100%;
                    // background-image: url(../../assets/logins/p2_torch.png);
                    opacity: 0;
                    transition:1s ease opacity;
                    z-index: 1;
                    &.t1{
                        // width: 1000px;
                        // transform: scale(.85,0.9) skew(19deg) translate(-5%, 3%);
                        width: 1280px;
                        transform: scale(0.75, 0.9) skew(1deg) translate(-32%, 3%);
                        left: 0;
                        opacity: .6;
                    }
                    &.t2{
                        // width: 1000px;
                        // transform: scale(0.85, 0.9) skew(19deg) translate(-5%, 3%) rotate(26deg);
                        width: 975px;
                        left: 67px;
                        top: 9px;
                        opacity: .6;
                        transform: scale(0.85, 0.9) skew(19deg) translate(-20%, 24%) rotate(27deg);
                    }
                    &.t3{
                        // left: 749px;
                        // top: 101px;
                        // transform: translateX(-69%) skew(20deg) rotate(16deg);
                        position: absolute;
                        width: 500px;
                        height: 500px;
                        bottom: 28px;
                        left: 661px;
                        top: 181px;
                        transform: translateX(-69%) skew(20deg) rotate(23deg);
                        background-size: 100% 100%;
                        z-index: 1;
                        opacity: .6;
                    }
                    &.t4{
                        width: 1000px;
                        // transform: scale(0.35, 0.9) skew(-34deg) translate(94%, 3%);
                        transform: scale(0.35, 0.9) skew(-48deg) translate(66%, 3%);
                        left: 0;
                        opacity: .6;
                    }
                    &.t5{
                        width: 1000px;
                        transform: scale(0.25, 0.7) skew(-71deg) translate(171%, 18%);
                        left: 0;
                        opacity: .6;
                    }
                    &.t6{
                        width: 1000px;
                        // transform: scale(0.25, 1.1) skew(-76deg) translate(214%, -5%);
                        transform: scale(0.24, 1.1) skew(-79deg) translate(191%, -5%);
                        left: 0;
                        opacity: .6;
                    }
                    &.t7{
                        width: 1000px;
                        // transform: scale(0.25, 1.5) skew(-79deg) translate(210%, -17%);
                        transform: scale(0.25, 1.5) skew(-81.4deg) translate(179%, -17%);
                        left: 0;
                        opacity: .6;
                    }
                    &.t8{
                        width: 1000px;
                        // transform: scale(0.25, 1.5) skew(-79deg) translate(210%, -17%);
                        transform: scale(0.25, 1.5) skew(-81.4deg) translate(179%, -17%);
                        left: 0;
                        opacity: .6;
                    }
                    &.t9{
                        width: 1000px;
                        // transform: scale(0.25, 1.5) skew(-79deg) translate(210%, -17%);
                        transform: scale(0.25, 1.5) skew(-81.4deg) translate(179%, -17%);
                        left: 0;
                        opacity: .6;
                    }
                }
            }
        }
        .slider3{
            background-image: url(../../assets/logins/p3_robot.png);
            background-size: cover;
            .hand{
                z-index: 999;
                position: absolute;
                bottom: 0;
                right: 450px;
                width: 310px;
                height: 479px;
                background-repeat: no-repeat;
                background-size: 100% auto;
                background-image: url(../../assets/logins/p3_hand.png);
            }
            .cont{
                z-index: 999;
                position: absolute;
                right: 450px;
                width: 310px;
                height: 479px;
                bottom: 0;
                .finger1, .finger2, .finger3, .finger4, .finger5{
                    color: #606CA9;
                    font-size: 14px;
                    opacity: .9;
                    position: absolute;
                    cursor: pointer;
                    p{
                        // position: absolute;
                        transition:all 1s ease;
                        &:before{
                            content: 'O';
                            width: 30px;
                            height: 30px;
                        }
                        &:after{
                            content: '';
                            position: absolute;
                            bottom: -138px;
                            left: 103px;
                            right: 0px;
                            top: -109px;
                            width: 1px;
                            transform: rotate(90deg);
                            background: linear-gradient(transparent, rgba(96, 108, 169,.75), transparent) left;
                        }
                    }
                    i{
                        transition:all 1s ease;
                        position: absolute;
                        width: 60px;
                        height: 60px;
                        border-radius: 50%;
                        border:1px solid rgba(255,255,255,.3);
                        box-shadow: 0 0 10px 6px rgba(115, 108, 195, 0.5);
                        // background: rgba(115, 108, 195, 0.8);
                        background: transparent;
                        &:after{
                            content: '';
                            width: 40px;
                            height: 40px;
                            border-radius: 50%;
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            transition:all 1s ease;
                            transform:translate(-50%, -50%);
                            border:1px solid rgba(255,255,255,.5);
                            // background:rgba(16, 14, 37,.7);
                            // box-shadow: inset 0 0 5px 3px rgba(115, 108, 195, 0.7);
                            box-shadow: 0 0 15px 15px rgba(115, 108, 195, 0.5);
                        }
                    }
                    @keyframes ringing{
                        0% { transform: scale(1); opacity: 1; }
                        50% { transform: scale(1.2); opacity: .5; }
                        100% { transform: scale(1.5); opacity: 0; }
                    }
                    &:hover, &.enter, &>p:hover, &>i:hover{
                        z-index: 99999;
                        opacity: 1;
                        color: rgba(255,255,255,1);
                        p{
                            &:after{
                                background:linear-gradient(transparent, rgba(96, 108, 169,1), transparent) left;
                            }
                        }
                        i{
                            // border:1px solid rgba(4, 243, 255, 0.8);
                            border:1px solid rgba(116, 218, 249, .8);
                            box-shadow: 0 0 10px 6px rgba(115, 108, 195, 0.6);
                            background: rgba(255, 255, 255, 0.5);
                            animation: ringing 750ms linear infinite;
                            &:after{
                                // border:1px solid rgba(4, 243, 255, 0.8);
                                border:1px solid rgba(116, 218, 249, .8);
                                background:rgba(255, 255, 255,.2);
                                box-shadow: inset 0 0 5px 3px rgba(115, 108, 195, 0.3);
                            }
                        }
                    }
                }
                .finger1{
                    left: -150px;
                    top: 90px;
                    i{
                        top:52px;
                        right: 10px;
                    }
                }
                .finger2{
                    left: -110px;
                    top: -40px;
                    i{
                        right: -75px;
                    }
                }
                .finger3{
                    left: 48px;
                    top: -95px;
                    i{
                        top: 79px;
                    }
                }
                .finger4{
                    left: 260px;
                    top: -55px;
                    i{
                        left: -58px;
                        top:60px;
                    }
                }
                .finger5{
                    top:-5px;
                    left: 340px;
                    i{
                        left: -72px;
                        top: 50px;
                    }
                }
            }
        }
        .slider4{
            background-image: url(../../assets/logins/p4_city.jpg);
            text-align: center;
            // background-size: 1920px 100%;
            // background-size: 1920px 1023px;
            background-size: auto 111%;
            // zoom: .8;
            background-repeat: repeat-x;
            .cont{
                display: inline-block;
                width: 1366px;
                height: 100%;
                // min-height: 750px;
                max-width: 1366px;
                position: relative;
                // border: 1px solid white;
                .l, .r{
                    display: none;
                    // animation: s4opa 1.5s linear 1;
                    // top: 20%;
                }
                .l{
                    position: absolute;
                    // left: 285px;
                    // top: 113px;
                    left: 10.5%;
                    top: 25%;
                    width: 460px;
                    height: 220px;
                    background-size: 100% auto;
                    background-repeat: no-repeat;
                    background-image: url(../../assets/logins/p4_l_bg.png);
                    p{
                        font-size: 30px;
                        font-weight: bold;
                        margin: 40px 0 20px -45px;
                    }
                    div{
                        font-size: 14px;
                        width: 280px;
                        white-space: normal;
                        margin: 0 0 0 89px;
                        line-height: 25px;
                        text-align: left;
                    }
                }
                .r{
                    position: absolute;
                    // left: 983px;
                    // top: 25px;
                    left: 67.5%;
                    top: 15%;
                    width: 380px;
                    height: 250px;
                    background-repeat: no-repeat;
                    background-size: 100% auto;
                    background-image: url(../../assets/logins/p4_r_bg.png);
                    p{
                        font-size: 30px;
                        font-weight: bold;
                        margin: 35px 0 17px -165px;
                    }
                    div{
                        font-size: 14px;
                        width: 250px;
                        white-space: normal;
                        margin: 0 0 0 48px;
                        line-height: 25px;
                        text-align: left;
                    }
                }
                .shinning{
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    // border:1px solid white;
                    background-repeat: no-repeat;
                    background-position: center;
                    // background-size: 1920px 100%;
                    // background-size: 1920px 1023px;
                    background-size: auto 111%;
                    background-image: url(../../assets/logins/p4_shinning.gif);
                    // background-image: none;
                }
                @keyframes p4opa {
                    0%   { transform: scale(1); opacity: 0; }
                    50% { transform: rotate(1.3);opacity: 1; }
                    100%   { transform: rotate(1);opacity: 0; }
                }
                .light{
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    .l1,.l2,.l3,.l4,.l5{
                        position: absolute;
                        width: 35px;
                        height: 1px;
                        background-color: rgba(255,255,255,.7);
                        border-radius: 50%;
                        box-shadow: 0px 0px 9px 6px rgba(255,255,255,.8);
                        bottom: 20px;
                    }
                    .l1{
                        // left:246px;
                        // animation:  5s 
                        left: -103px;
                        bottom: 69px;
                        animation: p4opa 5s linear infinite;
                    }
                    .l2{
                        // left: 603px;
                        // bottom: 40px;
                        left: 568px;
                        bottom: 16px;
                        animation: p4opa 2s linear infinite reverse;
                    }
                    .l3{
                        // left:932px;
                        left: 827px;
                        bottom:43px;
                        animation: p4opa 3s linear infinite;
                    }
                    .l4{
                        // left: 1173px;
                        // bottom: 91px;
                        left: 1024px;
                        bottom: 90px;
                        animation: p4opa 4s linear infinite reverse;
                    }
                    .l5{
                        // left: 95%;
                        // bottom: 9%;
                        right: 227px;
                        bottom: 15px;
                        animation: p4opa 8s linear infinite;
                    }
                }
            }
        }
        .slider5{
            .mask{
                z-index: 9;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                @keyframes hue-rotate {
                    0%   { filter: hue-rotate(0); }
                    50%   { filter: hue-rotate(90deg); }
                    100%   { filter: hue-rotate(0); }
                }
                background-size:cover;
                background-blend-mode: hard-light;
                animation: hue-rotate 5s linear infinite;
                background-image: url(../../assets/logins/p5_matrix.jpg);
                // background-color: rgba(0,0,0,.15);
                background-position: bottom;
            }
            @keyframes rotater5 {
                0%   { transform: rotate(0); }
                100% { transform: rotate(360deg); }
                0%   { transform: rotate(0); }
            }
            .business, .security{
                // opacity: 0;
                position: absolute;
                animation: none;
                z-index: 99;
                width: 400px;
                height: 200px;
                white-space: normal;
                text-align: left;
                line-height: 20px;
                p {
                    font-size: 30px;
                    font-weight: bold;
                    margin: 30px 0 20px 0;
                    height: 30px;
                    position: static;
                    em{
                        position: absolute;
                        width: 50px;
                        height: 50px;
                        left: -80px;
                        top: 10px;
                        border-radius: 50%;
                        border: 8px solid rgba(19, 53, 118, .35);
                    }
                    .b1{
                        position: absolute;
                        width: 50px;
                        height: 50px;
                        left: -80px;
                        top: 10px;
                        border-radius: 50%;
                        border: 8px solid transparent;
                        border-right: 8px solid rgba(19, 53, 118, .85);
                        animation:rotater5 5s linear infinite;
                    }
                    .b2{
                        position: absolute;
                        width: 40px;
                        height: 40px;
                        left: -71px;
                        top: 19px;
                        border-radius: 50%;
                        border: 4px solid rgba(19, 53, 118, 0.35);
                    }
                    .b3{
                        position: absolute;
                        width: 45px;
                        height: 45px;
                        left: -71px;
                        top: 20px;
                        border-radius: 50%;
                        border: 1px solid transparent;
                        border-left: 1px solid rgba(59, 105, 193, 0.85);
                        border-bottom: 1px solid rgba(59, 105, 193, 0.85);
                        animation:rotater5 5s linear infinite reverse;
                    }
                    .b4{
                        position: absolute;
                        width: 28px;
                        height: 28px;
                        left: -64px;
                        top: 24px;
                        border-radius: 50%;
                        border: 4px solid transparent;
                        border-right: 4px solid rgba(19, 53, 118, 0.85);
                        border-top: 4px solid rgba(19, 53, 118, 0.85);
                        animation:rotater5 7s linear infinite;
                    }
                    &:before{
                        content: '';
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: 50% auto;
                        width: 39px;
                        height: 39px;
                        position: absolute;
                        top: 20px;
                        left: -65px;
                    }
                    &:after{
                        content: '';
                        background-position: center;
                        background-repeat: no-repeat;
                        position: absolute;
                        left: 0;
                        top: 0;
                        right: 0;
                        bottom: 119px;
                        z-index: 0;
                    }
                }
                div{
                    font-size: 14px;
                    background-position: center;
                    background-repeat: no-repeat;
                    margin-left: 105px;
                    margin-top: 40px;
                    width: 270px;
                }
            }
            .business{
                left: 200px;
                top: 100px;
                p{
                    background: url(../../assets/logins/p5_blue_title.png) -50px -5px no-repeat;
                    &:before{
                        background-image: url(../../assets/logins/p5_blue_ico.png);
                    }
                }
                div{
                    &:after{
                        content: '';
                        position: absolute;
                        top: 60px;
                        left: 180px;
                        bottom: 0;
                        right: 0px;
                        background-repeat: no-repeat;
                        background-image: url(../../assets/logins/p5_blue_border.png);
                    }
                }
            }
            .security{
                top: 350px;
                left: 400px;
                p{
                    background: url(../../assets/logins/p5_red_title.png) -50px -5px no-repeat;
                    em{
                        border: 8px solid rgba(185,68,99, .35);
                    }
                    .b1{
                        border: 8px solid transparent;
                        border-right: 8px solid rgba(185,68,99, .85);
                    }
                    .b2{
                        border-radius: 50%;
                        border: 4px solid rgba(185,68,99, 0.35);
                    }
                    .b3{
                        border: 1px solid transparent;
                        border-left: 1px solid rgba(193,59,59, 0.85);
                        border-bottom: 1px solid rgba(193,59,59, 0.85);
                    }
                    .b4{
                        border: 4px solid transparent;
                        border-right: 4px solid rgba(185,68,99, 0.85);
                        border-top: 4px solid rgba(185,68,99, 0.85);
                    }
                    &:before{
                        top: 23px;
                        background-image: url(../../assets/logins/p5_red_ico.png);
                    }
                }
                div{
                    &:after{
                        content: '';
                        position: absolute;
                        top: 60px;
                        left: 180px;
                        bottom: 0;
                        right: 0px;
                        background-repeat: no-repeat;
                        background-image: url(../../assets/logins/p5_red_border.png);
                    }
                }
            }
        }
    }
    .err-tip{
        display: none;
        color: #f56c6c;
        font-size: 12px;
        margin: -35px 0 18px 0;
        line-height: normal;
    }
}
.slider-pagination{
    // display: none;
    .slider-pagination-bullet{
        background: #fff none repeat scroll 0 0;
    }
}


/**
 * @media query
 */
/* 
@media screen and (min-width:1500px){
    .login-container {
        .slider-div{
            .slider2{
                .con{
                    .torch{
                        &.t1{
                            width: 1280px;
                            transform: scale(0.75, 0.9) skew(1deg) translate(-30%, 3%);
                            left: 0;
                            opacity: .6;
                        }
                        &.t2{
                            width: 975px;
                            left: 67px;
                            top: 9px;
                            opacity: .6;
                            transform: scale(0.85, 0.9) skew(19deg) translate(-19%, 24%) rotate(27deg);
                        }
                        &.t3{
                            position: absolute;
                            width: 500px;
                            height: 500px;
                            bottom: 28px;
                            left: 665px;
                            top: 185px;
                            transform: translateX(-69%) skew(21deg) rotate(23deg);
                            background-size: 100% 100%;
                            z-index: 1;
                            opacity: .6;
                        }
                        &.t4{
                            width: 1000px;
                            transform: scale(0.35, 0.9) skew(-42deg) translate(68%, 3%);
                            left: 0;
                            opacity: .6;
                        }
                        &.t5{
                            width: 1000px;
                            transform: scale(0.25, 0.7) skew(-70deg) translate(173%, 18%);
                            left: 0;
                            opacity: .6;
                        }
                        &.t6{
                            width: 1000px;
                            transform: scale(0.24, 1.1) skew(-78deg) translate(188%, -5%);
                            left: 0;
                            opacity: .6;
                        }
                        &.t7{
                            width: 1000px;
                            transform: scale(0.25, 1.5) skew(-81deg) translate(180%, -17%);
                            left: 0;
                            opacity: .6;
                        }
                    }
                }
            }
            .slider4{
                 .cont{
                    .l{
                        top: 21%;
                    }
                    .r{
                        left: 63%;
                    }
                    .shinning{
                        background-size: 116% 100%;
                    }
                    .light{
                        .l1{
                            left: 33px;
                            bottom: 52px;
                            animation: p4opa 5s linear infinite;
                        }
                        .l2{
                            left: 570px;
                            bottom: 52px;
                            animation: p4opa 2s linear infinite reverse;
                        }
                        .l3{
                            left: 990px;
                            animation: p4opa 3s linear infinite;
                        }
                        .l4{
                            left: 1158px;
                            bottom: 101px;
                            animation: p4opa 4s linear infinite reverse;
                        }
                        .l5{
                            right: -37px;
                            bottom: 52px;
                            animation: p4opa 8s linear infinite;
                        }
                    }
                 }
            }
        }
    }
}

@media screen and (min-width:1500px) and (max-width:1920px) {
}
 */

/* @media screen and (min-height:800px) and (max-height:1000px){
    .login-container {
        .slider-div{
            .slider4{
                 .cont{
                    .l, .r{
                        top: 25%;
                    }
                    .l{
                        left: 11%;
                    }
                    .r{
                        top:15%;
                        left: 67%;
                    }
                    .shinning{
                        // background-size: 116% 100%;
                        background-size: 140% 100%;
                    }
                    .light{
                        .l1{
                            left: 33px;
                            bottom: 52px;
                            animation: p4opa 5s linear infinite;
                        }
                        .l2{
                            left: 570px;
                            bottom: 52px;
                            animation: p4opa 2s linear infinite reverse;
                        }
                        .l3{
                            left: 990px;
                            animation: p4opa 3s linear infinite;
                        }
                        .l4{
                            left: 1158px;
                            bottom: 101px;
                            animation: p4opa 4s linear infinite reverse;
                        }
                        .l5{
                            right: -37px;
                            bottom: 52px;
                            animation: p4opa 8s linear infinite;
                        }
                    }
                 }
            }
        }
    }
} */

@import "src/styles/zhicheng-style.scss";

// // References: https://www.zhangxinxu.com/wordpress/2018/01/css-caret-color-first-line/
// @supports (-webkit-mask: none) and (not (cater-color: $loginCursorColor)) {
//   .login-container .el-input {
//     input { color: $loginCursorColor; }
//     input::first-line { color: $lightGray; }
//   }
// }

// .login-container {
//   .el-input {
//     display: inline-block;
//     height: 47px;
//     width: 85%;

//     input {
//       height: 47px;
//       background: transparent;
//       border: 0px;
//       border-radius: 0px;
//       padding: 12px 5px 12px 15px;
//       color: $lightGray;
//       caret-color: $loginCursorColor;
//       -webkit-appearance: none;

//       &:-webkit-autofill {
//         box-shadow: 0 0 0px 1000px $loginBg inset !important;
//         -webkit-text-fill-color: #fff !important;
//       }
//     }
//   }

//   .el-form-item {
//     border: 1px solid rgba(255, 255, 255, 0.1);
//     background: rgba(0, 0, 0, 0.1);
//     border-radius: 5px;
//     color: #454545;
//   }
// }
</style>

<style lang="scss" scoped>
// .login-container {
//   height: 100%;
//   width: 100%;
//   overflow: hidden;
//   background-color: $loginBg;

//   .login-form {
//     position: relative;
//     width: 520px;
//     max-width: 100%;
//     padding: 160px 35px 0;
//     margin: 0 auto;
//     overflow: hidden;
//   }

//   .tips {
//     font-size: 14px;
//     color: #fff;
//     margin-bottom: 10px;

//     span {
//       &:first-of-type {
//         margin-right: 16px;
//       }
//     }
//   }

//   .svg-container {
//     padding: 6px 5px 6px 15px;
//     color: $darkGray;
//     vertical-align: middle;
//     width: 30px;
//     display: inline-block;
//   }

//   .title-container {
//     position: relative;

//     .title {
//       font-size: 26px;
//       color: $lightGray;
//       margin: 0px auto 40px auto;
//       text-align: center;
//       font-weight: bold;
//     }

//     .set-language {
//       color: #fff;
//       position: absolute;
//       top: 3px;
//       font-size: 18px;
//       right: 0px;
//       cursor: pointer;
//     }
//   }

//   .show-pwd {
//     position: absolute;
//     right: 10px;
//     top: 7px;
//     font-size: 16px;
//     color: $darkGray;
//     cursor: pointer;
//     user-select: none;
//   }

//   .thirdparty-button {
//     position: absolute;
//     right: 0;
//     bottom: 6px;
//   }

//   @media only screen and (max-width: 470px) {
//     .thirdparty-button {
//       display: none;
//     }
//   }
// }
</style>
